<template>
  <div class='container'>
    <el-card class="box">
      <div class="btn">
        <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('/questions/new')">新增试题</el-button>
      </div>
      <el-form label-width="80px" size="small" >
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select placeholder="请选择" v-model="form.subjectID" style="width:100%" @change="changeSubject">
                <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" >
               <el-select placeholder="请选择" v-model="form.catalogID" style="width:100%">
                 <el-option
                 v-for="item in directoryList"
                :key="item.id"
                :label="item.label"
                :value="item.value">
                 </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select placeholder="请选择" v-model="form.tags" style="width:100%">
                <el-option
                v-for="item in labelList"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
                <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
               <el-select placeholder="请选择" v-model="form.questionType" style="width:100%">
                 <el-option
                  v-for="item in textTypeList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
               <el-select placeholder="请选择" v-model="form.difficulty" style="width:100%">
                 <el-option
                  v-for="item in difficultyList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
               <el-select placeholder="请选择" v-model="form.direction" style="width:100%">
                 <el-option
                  v-for="item in directionList"
                  :key="item.id"
                  :label="item"
                  :value="item">
                 </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
               <el-select placeholder="请选择" v-model="form.creatorID" style="width:100%">
                 <el-option
                  v-for="item in enterList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id">
                 </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
                <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
                <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
                <el-select v-model="form.province" placeholder="请选择" style="width: 47%; margin-right: 3%" @change="changeCity">
                  <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
                <el-select v-model="form.city" placeholder="请选择" style="width: 50%">
                  <el-option
                    v-for="item in countyList"
                    :key="item.id"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="clear()">清除</el-button>
              <el-button type="primary" @click="search()">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
       <el-tabs v-model="parmars.chkState" type="card" @tab-click="changeTab">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
        <el-alert
          :title="`数据一共${parmars.total}条`"
          type="info"
          show-icon
          :closable='false'>
        </el-alert>
        <el-table style="width: 100%; margin-top: 20px" :data="tableData">
          <el-table-column prop="number" label="试题编号"></el-table-column>
          <el-table-column prop="subject" label="学科"></el-table-column>
          <el-table-column prop="catalog" label="目录"></el-table-column>
          <el-table-column label="题型">
            <template v-slot='{row}'>
              {{ questionType.find(item=>item.value === +row.questionType).label }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="200">
            <template v-slot='{row}'>
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="200">
            <template v-slot='{row}'>
              {{ row.addDate | parseTime }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template v-slot='{row}'>
              {{ difficulty.find(item=>item.value === +row.difficulty).label }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"></el-table-column>
          <el-table-column label="审核状态">
            <template v-slot='{row}'>
              {{ row.chkState | StateChk }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见"></el-table-column>
          <el-table-column prop="chkUser" label="审核人"></el-table-column>
          <el-table-column label="发布状态" width="150px">
          <template v-slot="{row}">
            {{ row.publishState | StatePublish }}
           </template>
        </el-table-column>
          <el-table-column label="操作" width="300">
            <template v-slot="{row}">
              <el-button class="fs" type="text" @click="preview(row)">预览</el-button>
              <el-button class="fs" type="text" @click="audit(row.id)" :disabled='row.chkState !== 0'>审核</el-button>
              <el-button class="fs" type="text" @click="updata(row.id)" :disabled='row.publishState == 1'>修改</el-button>
              <el-button class="fs" type="text" @click="publish(row)">{{row.publishState === 1 ? '下架' : '上架'}}</el-button>
              <el-button class="fs" type="text" @click="del(row)" :disabled='row.publishState == 1'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <div style="margin: 20px 0; float: right">
        <el-pagination
        background
        :current-page="parmars.page"
        :page-sizes="parmars.pagesizes"
        :page-size="parmars.pagesize"
        layout="prev, pager, next, sizes, jumper"
        @current-change="pager"
        @size-change="changeFn"
        :total="parmars.total">
      </el-pagination>
      </div>
      <QuestionCheck :data='auditInfo' ref="audit" @updateList='choice()'/>
      <QuestionPreview :currentid='currentid' ref="preview" @updateList='choice()'/>
    </el-card>
  </div>
</template>

<script>
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { choice, choicePublish, remove } from '@/api/hmmm/questions'
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { simple as labelList } from '@/api/hmmm/tags'
import { simple as enterList } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import QuestionCheck from '../components/questions-check'
import QuestionPreview from '../components/questions-preview'
export default {
  name: 'SelectQuestion',
  components: {
    QuestionCheck,
    QuestionPreview
  },
  data () {
    return {
      difficulty,
      questionType,
      form: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      subjectList: [],
      directoryList: [],
      labelList: [],
      tableData: [],
      enterList: [],
      countyList: [],
      currentid: null,
      cityList: provinces(),
      textTypeList: questionType,
      difficultyList: difficulty,
      directionList: direction,
      auditInfo: {},
      parmars: {
        total: 0,
        page: 1,
        pages: 1,
        pagesize: 5,
        pagesizes: [5, 10, 20, 50],
        chkState: 'all'
      }
    }
  },
  filters: {
    StateChk (val) {
      if (val === 0) return '待审核'
      if (val === 1) return '已审核'
      if (val === 2) return '已拒绝'
    },
    StatePublish (row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      }
      return '待发布'
    }
  },
  async created () {
    const { data: subject } = await subjectList()
    // console.log(subject)
    this.subjectList = subject
    const { data: enter } = await enterList()
    // console.log(enter)
    this.enterList = enter
    this.choice()
  },
  methods: {
    changeTab () {
      this.parmars.page = 1
      this.choice()
    },
    async changeSubject (subjectID) {
      this.form.catalogID = null
      this.form.tags = null
      if (subjectID) {
        const { data: catalogID } = await directoryList()
        // console.log(directory)
        this.directoryList = catalogID
        const { data: tags } = await labelList()
        // console.log(label)
        this.labelList = tags
      } else {
        this.directoryList = []
        this.labelList = []
      }
    },
    async changeCity (pname) {
      if (this.form.city) {
        this.countyList = citys(pname)
      } else {
        this.countyList = []
      }
    },
    preview (row) {
      this.currentid = row.id
      this.$refs.preview.show()
    },
    audit (id) {
      this.auditInfo.id = id
      this.$nextTick(() => {
        this.$refs.audit.open()
      })
    },
    async choice () {
      const parmars = { ...this.parmars, ...this.form }
      if (parmars.chkState === 'all') parmars.chkState = null
      const { data } = await choice(parmars)
      // console.log(data)
      this.tableData = data.items
      this.parmars.total = data.counts
    },
    async publish (row) {
      await this.$confirm(`此操作将${row.publishState === 1 ? '上架' : '下架'}该文件, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      row.publishState = row.publishState === 1 ? 0 : 1
      await choicePublish(row)
      this.$message.success(`${row.publishState === 1 ? '上架' : '下架'}成功`)
    },
    updata (id) {
      // this.$router.push('/questions/new?id=' + id)
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    },
    async del (row) {
      await this.$confirm('是否永远删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(row)
      this.$message.success('删除成功')
      this.choice()
    },
    changeFn (value) {
      this.parmars.page = 1
      this.parmars.pagesize = value
      this.choice()
    },
    pager (np) {
      this.parmars.page = np
      this.choice()
    },
    clear () {
      for (const key in this.form) {
        this.form[key] = null
      }
      this.choice()
    },
    search () {
      this.parmars.page = 1
      this.choice()
    }
  }
}
</script>

<style scoped lang='scss'>
 .box {
   margin: 10px;
  .btn {
    margin-bottom: 15px;
    text-align: right;
  }
}
</style>
